<template>
  <header :class="{ 'scrolled-nav': scrolledNav }">
    <nav>
      <div class="logo">
        <router-link class="logo-img" :to="{ name: 'home' }">
          <img src="../assets/logo.png" width="100" alt="" />
          <h2>藏头诗</h2>
        </router-link>
      </div>
      <ul v-if="!mobile" class="navigation">
        <li><router-link class="link" :to="{ name: 'home' }">首页</router-link></li>
        <li><router-link class="link" :to="{ name: 'login' }">登录/注册</router-link></li>
      </ul>
      <div class="burger" v-if="mobile">
        <svg t="1658836692661" @click="toggleMobileNav" class="icon" :class="{ 'icon-active': mobileNav }" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3648" width="30" height="30"><path d="M958.060195 237.681284c0 9.611915-7.792477 17.404392-17.404392 17.404392L79.092359 255.085676c-9.611915 0-17.404392-7.792477-17.404392-17.404392l0-90.030479c0-9.611915 7.792477-17.404392 17.404392-17.404392l861.562421 0c9.611915 0 17.404392 7.792477 17.404392 17.404392L958.059172 237.681284z" p-id="3649" fill="#8a8a8a"></path><path d="M958.060195 557.488007c0 9.611915-7.792477 17.404392-17.404392 17.404392L79.092359 574.892399c-9.611915 0-17.404392-7.792477-17.404392-17.404392l0-90.030479c0-9.611915 7.792477-17.404392 17.404392-17.404392l861.562421 0c9.611915 0 17.404392 7.792477 17.404392 17.404392L958.059172 557.488007z" p-id="3650" fill="#8a8a8a"></path><path d="M958.060195 877.29473c0 9.611915-7.792477 17.404392-17.404392 17.404392L79.092359 894.699122c-9.611915 0-17.404392-7.792477-17.404392-17.404392l0-90.030479c0-9.611915 7.792477-17.404392 17.404392-17.404392l861.562421 0c9.611915 0 17.404392 7.792477 17.404392 17.404392L958.059172 877.29473z" p-id="3651" fill="#8a8a8a"></path></svg>
      </div>
      <transition name="mobile-nav">
        <ul v-if="mobileNav" class="dropdown-nav">
          <li><router-link class="link" :to="{ name: 'home' }">首页</router-link></li>
          <li><router-link class="link" :to="{ name: 'login' }">登录/注册</router-link></li>
        </ul>
      </transition>
    </nav>
  </header>
</template>

<script setup>
import { ref, onMounted } from "vue";
let scrolledNav = ref(null);
let mobile = ref(false);
let mobileNav = ref(false);
let windowWidth = ref(null);

function toggleMobileNav() {
  mobileNav.value = !mobileNav.value;
}

function updateScroll() {
  const scrollPosition = window.scrollY;
  if (scrollPosition > 50) {
    scrolledNav.value = true;
    return;
  }
  scrolledNav.value = false;
}

function checkScreen() {
  windowWidth.value = window.innerWidth;
  if (windowWidth.value <= 1112) {
    mobile.value = true;
    return;
  }
  mobile.value = false;
  mobileNav.value = false;
  return;
}

onMounted(() => {
  window.addEventListener("scroll", updateScroll, false);
});

window.addEventListener("resize", checkScreen, false);
checkScreen();
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
  font-family: Arial, "Microsoft YaHei UI", sans-serif;
}

header {
  background-color: #fff;
  z-index: 99;
  width: 100%;
  position: fixed;
  transition: 0.3s ease all;
  color: #212121;
  box-shadow: 0 5px 6px #ddd;

  nav {
    display: flex;
    flex-direction: row;
    padding: 12px 0;
    transition: 0.3s ease all;
    width: 100%;
    margin: 0 auto;
    @media (min-width: 1620px) {
      max-width: 1620px;
    }

    ul,
    .link{
      font-weight: 500;
      color: #212121;
      text-decoration: none;
    }

    li {
      text-transform: uppercase;
      padding: 16px;
      margin-left: 16px;
    }

    .link {
      font-size: 15px;
      transition: .3s ease all;
      padding-bottom: 4px;
      border-bottom: 2px solid transparent;

      &:hover {
        color: #af3e71;
        border-color: #3eaf7c;
      }
    }

    .logo {
      margin-left: 24px;
      display: flex;
      align-items: center;

      .logo-img {
        display: flex;
        align-items: center;

        img {
          width: 50px;
          transition: .3s ease all;
        }

        h2 {
          margin-left: 10px;
          color: #212121;
          text-decoration: none;
          font-size: 20px;
          padding-bottom: 4px;
          border-bottom: 2px solid transparent;
          transition: .3s ease all;

          &:hover {
            color: #af3e71;
            border-color: #3eaf7c;
          }

          @media screen and (max-width: 1114px) {
            font-size: 17px;
            margin-left: 7px;
          }
        }
      }
    }

    .navigation {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: flex-end;
    }

    .burger {
      display: flex;
      align-items: center;
      position: absolute;
      top: 0;
      right: 24px;
      height: 100%;

      .icon {
        cursor: pointer;
        transition: .5s ease all;
      }

      .icon-active {
        transform: rotate(180deg);
      }
    }

    .dropdown-nav {
      display: flex;
      flex-direction: column;
      position: fixed;
      width: 100%;
      max-width: 260px;
      height: 100%;
      background-color: #d7ccc8;
      border: 1px solid #e0e0e0;
      box-shadow: 5px 0 6px #ddd;
      border-top: 0;
      top: 73px;
      left: 0;

      li {
        margin-left: 0;
        .link {
          color: #212121;
        }
      }
    }

    .mobile-nav-enter-active,
    .mobile-nav-leave-active {
      transition: .8s ease all;
    }

    .mobile-nav-enter-from,
    .mobile-nav-leave-to {
      transform: translateX(-250px);
    }

    .mobile-nav-enter-to {
      transform: translateX(0);
    }
  }
}

.scrolled-nav {
  background-color: #fff;

  nav {
    padding: 8px 0;
    .logo {
      .logo-img {
        img {
          width: 40px;
        }
      }
    }

  }
}
</style>